<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body, html {
            height: 100%;
            background-color: #749ece;
        }

        #message-input {
            width: 90%;
            padding: 5px;
            box-sizing: border-box;
            border-radius: 5px;
            height: 45px;
        }

        #response-container {
            display: flex;
            flex-direction: column;
            margin-top: 20px;
            width: 90%;
            height: calc(100% - 225px);
            background-color: #e4d8f3;
            overflow-y: auto;
            padding: 10px;
        }

        .questBord {
            padding: 20px;
            box-sizing: border-box;
            text-align: center;
            width: 50%;
            height: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #chat-form {
            width: 90%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            margin-top: 10px;
        }

        #chat-form button {
            width: 50px;
            height: 45px;
            border-radius: 6px;
            background-color: #584767;
            color: white;
        }

        .question {
            text-align: left;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .answer {
            text-align: left;
            margin-bottom: 10px;
            white-space: pre-wrap;
        }

        ::-webkit-scrollbar {
            width: 3px;
        }

        ::-webkit-scrollbar-track {
            background-color: #9ed7dc;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #a6dcd5;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #574865;
        }
    </style>
</head>
<body>
<div id="chat-container" class="questBord">
    <h1>Chat Application</h1>
    <div id="response-container"></div>
    <form id="chat-form">
        <input type="text" id="message-input" name="message" placeholder="Enter your message" required>
        <button type="submit">Send</button>
    </form>
</div>
<script>
    var form = document.getElementById('chat-form');
    var messageInput = document.getElementById('message-input');
    var responseContainer = document.getElementById('response-container');

    form.addEventListener('submit', function (event) {
        event.preventDefault();
        var message = messageInput.value;
        sendMessage(message);
        messageInput.value = '';
    });

    function sendMessage(message) {
        var questionElement = document.createElement('div');
        questionElement.classList.add('question');
        questionElement.textContent = message;
        responseContainer.appendChild(questionElement);

        var answerElement = document.createElement('div');
        answerElement.classList.add('answer');

        var request = {
            message: message
        };

        fetch('/chat', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(request)
        })
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                var answerText = data.msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
                displayAnswer(answerElement, answerText);
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    function displayAnswer(answerElement, answerText) {
        var index = 0;
        var speed = 50; // 控制回答显示的速度，可以根据需要调整

        function type() {
            if (index < answerText.length) {
                answerElement.innerHTML += answerText.charAt(index);
                index++;
                setTimeout(type, speed);
            } else {
                responseContainer.scrollTop = responseContainer.scrollHeight;
            }
        }

        responseContainer.appendChild(answerElement);
        type();
    }
</script>
</body>
</html>
